<template>
  <div class="main">
    <el-form ref="form" :model="addTopicForm" label-width="80px">
      <el-form-item label="作业名称">
        <el-input v-model="addTopicForm.topicName"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="addTopicForm.className" placeholder="请选择班级">
          <el-option v-for="list in lists" :key="list.value" :label="list.className" :value="list.className" >
           
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作业时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择开始日期"
            v-model="addTopicForm.homeworkStartTime"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择结束日期"
            v-model="addTopicForm.homeworkEndTime"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <router-link to="teacher_topic">
          <el-button type="primary" @click="onSubmit()">立即创建</el-button>
          </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "topic",
  data() {
    return {
      num: 1,
      lists: [],
      addTopicForm: {
        topicName: "",
        className: "",
        homeworkEndTime: "",
        homeworkStartTime: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");

      this.$axios
        .post("http://10.197.26.58:8001/addTopic", this.addTopicForm)
        .then((response) => {
          this.lists = response.data.slice(0, 100);
          console.log(this.lists);
        })
        .catch(function (error) {
          //请求失败处理
          console.log(error);
        });
    },
  },
  mounted() {
    this.$axios
      .get("http://10.197.26.58:8001/getclasslist")
      .then((response) => {
        this.lists = response.data.slice(0, 100);
        console.log(this.lists);
      })
      .catch(function (error) {
        //请求失败处理
        console.log(error);
      });
  },
};
</script>

<style scoped>
.main {
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  width: 500px;
  height: 600px;
  margin: auto;
 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
